<template>
  <el-container direction="vertical" class="vH">
    <el-row class="padding_top_10" type="flex" align="middle">
      <el-form :model="txtsearch" class="searchform" :inline="true">
        <el-form-item label="中文名称">
          <el-input
            v-model="txtsearch.SYS_ASSET_A1_50"
            v-nulltext
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="字段分组名称">
          <el-input
            v-model="txtsearch.SYS_ASSET_A1_140"
            v-nulltext
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="资产数据字段">
          <el-input
            v-model="txtsearch.SYS_ASSET_A1_160"
            v-nulltext
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-button icon="el-icon-plus">新增</el-button> -->
      </el-form>
    </el-row>
    <el-main class="el-main_padding1">
      <el-table
        ref="table"
        v-loading="loading"
        border
        :data="tableData"
        stripe
        row-key="AUTOID"
        height="100%"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column type="index" width="40" label="序号">
        </el-table-column>
        <el-table-column prop="SYS_ASSET_A1_50" label="中文名称">
        </el-table-column>
        <el-table-column prop="SYS_ASSET_A1_30" label="列表字段排序">
        </el-table-column>
        <el-table-column prop="SYS_ASSET_A1_140" label="字段分组名称">
        </el-table-column>
        <el-table-column
          prop="SYS_ASSET_A1_160"
          width="150px"
          label="资产数据字段"
        >
        </el-table-column>
      </el-table>
    </el-main>
    <!-- <el-footer class="main-footer ">
      <mei-pagination :pageTotal="sysassetA1Data.length" v-model="paginations">
      </mei-pagination>
    </el-footer> -->
  </el-container>
</template>

<script>
import { SysAssetA1, SysAssetA2 } from "@/api";
export default {
  data() {
    return {
      loading: false,
      txtsearch: {
        SYS_ASSET_A1_40: "1",
        SYS_ASSET_A1_160: "",
        SYS_ASSET_A1_50: "",
        SYS_ASSET_A1_60: "",
        SYS_ASSET_A1_140: ""
      },
      sysassetA1Data: [],
      paginations: {}
    };
  },
  //外部属性
  props: {
    sys10id: {
      type: [String, Number],
      default: ""
    }
  },
  //内部方法
  methods: {
    async initPage() {
      const loading = this.$loading({
        target: this.$refs.table.$el,
        lock: true,
        text: "加载中..."
      });
      this.sysassetA1Data = await SysAssetA1.get(this.txtsearch);
      this.$nextTick(() => {
        loading.close();
      });
    },
    async getsysA2(sys10id) {
      this.loading = true;
      this.$refs.table.clearSelection();
      this.$nextTick(async () => {
        let sysA2 = await SysAssetA2.get(sys10id);
        this.sysassetA1Data.forEach(row => {
          if (sysA2.includes(row.AUTOID.toString())) {
            this.$refs.table.toggleRowSelection(row);
          }
        });
        this.loading = false;
      });
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    //内存分页
    tableData() {
      let _data = this.sysassetA1Data;
      // const { index = 1, size = 10 } = this.paginations;
      // _data = this.sysassetA1Data.slice((index - 1) * size, size * index);
      return _data;
    }
  },
  //监视
  watch: {
    txtsearch: {
      handler() {
        this.initPage();
      },
      deep: true
    },
    sys10id(sys10id) {
      this.getsysA2(sys10id);
    }
  }
};
</script>

<style lang="scss" scoped>
.searchform {
  /deep/ .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
